<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/header :: commonHead}"></head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>同步历史</h5>
                    <div class="ibox-tools">
                        <a href="javascript: window.location.reload();" title="刷新"><i
                                class="glyphicon glyphicon-repeat"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="label-group-table"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade in" id="ticketModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 500px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ticketModelLabel"></h4>
            </div>
            <div class="modal-body" style="height: 300px">
                <div class="input-group">
                    <input value="" type="text" placeholder="输入关键词" class="input-sm form-control" id="search-ticket">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-sm btn-primary" id="search-ticket-btn"> 搜索</button>
                    </span>
                </div>
                <table class="table">
                    <thead style="display:table;width:100%;table-layout:fixed;">
                    <tr>
                        <th style="width: 20%;">LOGO</th>
                        <th style="width: 35%;">券名称</th>
                        <th style="width: 10%;">总量</th>
                        <th style="width: 15%;">类型</th>
                        <th style="width: 20%;">操作</th>
                    </tr>
                    </thead>
                    <tbody style="display:block;height:200px;overflow-y:auto;width: 100%;text-align: center" id="inner">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script th:inline="javascript">
    let keyword, table, belonging = [[${sysUser.id}]];

    let id =  [[${id}]];

    loadTable();

    function loadTable() {
        layui.use('table', function () {
            table = layui.table;
            table.render({
                id: 'label-group-table',
                elem: '#label-group-table',
                height: 800,
                url: ipDomain + '/quanquan-user/labelGroup/synRecordList/'+id,
                contentType: 'application/json; charset=utf-8',
                loading: true,
                skin: 'line',
                size: 'sm',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.resCode, //解析接口状态
                        "msg": res.resMsg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                method: 'post',
                limit:20,
                limits:[20,40,60,80,100],
                request: {
                    pageName: 'page',
                    limitName: 'size'
                },
                where: {belonging: belonging},
                page: true,
                cellMinWidth: 120,
                cols: [
                        [
                        {field: 'id', title: 'ID',  sort: true, fixed: 'left'},
                        {field: 'createTime', title: '创建时间', sort: true,  fixed: 'left'},
                        {field: 'containsNum', title: '包含人数', sort: true,  fixed: 'left'},
                        {field: 'synStatus',title: '同步状态', fixed: 'left', templet: function (e) {
                                let temp = '';
                                if (e.synStatus == 2) {
                                    temp = '同步成功';
                                } else if (e.synStatus == 1) {
                                    temp = '同步中';
                                } else if (e.synStatus == 0) {
                                    temp = '<span style="color: red">同步失败</span>'
                                }
                                return temp
                            }
                        },
                        {field: 'updateTime', title: '同步完成时间', sort: true, fixed: 'left'},
                        {
                            title: '操作', templet: function (e) {
                                if (e.synStatus == 2) {
                                    return '<button onclick="viewDetails(\'' + e.groupId + '\',\'' + e.id + '\')" class="layui-btn layui-btn-xs">查看</button>'
                                        + '<button onclick="exportData(\'' + e.groupId + '\',\'' + e.id + '\')" class="layui-btn layui-btn-xs">下载</button>'
                                        // + '<button onclick="remove(\'' + e.id + '\')" class="layui-btn layui-btn-danger layui-btn-xs">删除</button> '
                                        ;
                                } else if (e.synStatus == 1) {
                                    return "";
                                } else if (e.synStatus == 0) {
                                    return '<button onclick="remove(\'' + e.id + '\')" class="layui-btn layui-btn-danger layui-btn-xs">删除</button> '
                                        ;
                                }

                            }, fixed: 'left'
                        }
                    ]
                ],
                done: function (res, curr, count) {
                    this.where = {
                        keyword: keyword,
                        belonging: belonging
                    };
                }
            });
        });
    }

    function exportData(groupId,id) {
        window.location.href = ipDomain + "/quanquan-user/labelGroup/exportData?groupId="+groupId+"&id="+id;
    }

    function viewDetails(groupId,id) {
        window.location.href = "/userLabel/synRecordDetail?groupId="+groupId+"&id="+id;
    }


    function remove(id) {
        if (id == null) {
            layer.msg('Id不能为空', {icon: 11, time: 1000, shade: [0.5, '#000', true]});
        }
        $.get(ipDomain + '/quanquan-user/labelGroup/remove/' + id,
            (res) => {
                if (res.resCode == 0) {
                    layer.msg('删除成功', {icon: 1, time: 500, shade: [0.5, '#000', true]});
                } else {
                    layer.msg(res.resMsg, {icon: 11, time: 1000, shade: [0.5, '#000', true]});
                }
            }
        );
    }

</script>
</html>